<template>
  <el-container>
    <el-header height="80px">
      <el-col :span="24" class="header">
        <span class="logo" :class="isCollapse?'menu-collapsed':'menu-expanded'">
          {{isCollapse?sysName.substring(0,1):sysName}}
        </span>
        <span class="tools">
          <i class="fa fa-align-justify" :class="isCollapse?'doRotate':''" @click.prevent="collapse"></i>
        </span>
        <span class="userinfo">
          <el-dropdown trigger="hover" style="margin-right:20px;">
            <span class="el-dropdown-link userinfo-inner">
              <span>我的消息</span>
              <el-badge :value="15" />
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item class="clearfix">
                评论
                <el-badge class="mark" :value="12" />
              </el-dropdown-item>
              <el-dropdown-item class="clearfix">
                回复
                <el-badge class="mark" :value="3" />
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-dropdown trigger="hover">
            <span class="el-dropdown-link userinfo-inner">
              <img :src="avatar" />{{username}}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="setAvatar">
                <i class="fa fa-user"></i> 设置头像
              </el-dropdown-item>
              <el-dropdown-item @click.native="resetPassword">
                <i class="fa fa-lock"></i> 修改密码
              </el-dropdown-item>
              <el-dropdown-item divided @click.native="logout">
                <i class="fa fa-sign-out"></i> 退出登录
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </span>
      </el-col>
    </el-header>
    <el-container>
      <aside :class="isCollapse?'menu-collapsed':'menu-expanded'">
        <keep-alive>
          <el-menu :default-openeds="defaultOpens" router :collapse="isCollapse" style="min-height: 800px;">
            <sidebar-item :menu="menu" :collapse="isCollapse"></sidebar-item>
          </el-menu>
        </keep-alive>
      </aside>
      <el-main>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item v-for="item in $route.matched" :to="item.path?item.path:'/dashboard'" :key="item.path">
            {{ item.name }}
          </el-breadcrumb-item>
        </el-breadcrumb>
        <div class="main-container">
          <transition name="fade" mode="out-in">
            <router-view></router-view>
          </transition>
        </div>
      </el-main>
    </el-container>
    <el-footer height="30px">{{copyright}}
    </el-footer>

    <!-- 弹窗 -->
    <el-dialog title="设置头像" :visible.sync="setAvatarShow" width="400px">
      <el-upload class="avatar-uploader" :action="uploadAction" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
        <img v-if="avatar" :src="avatar" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </el-dialog>

    <el-dialog title="修改密码" :visible.sync="resetPasswordShow" width="400px">
        <el-form :model="user" :rules="rules" ref="resetForm">
          <el-form-item label="新密码" label-width="100px" prop="password">
            <el-input type="password" v-model="user.password" auto-complete="off" suffix-icon="el-icon-fa-lock"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" label-width="100px" prop="rePassword">
            <el-input type="password" v-model="user.rePassword" auto-complete="off" suffix-icon="el-icon-fa-lock"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="resetPasswordShow = false">取 消</el-button>
          <el-button type="primary" @click="resetPasswordSubmit('resetForm')">确 定</el-button>
        </div>
    </el-dialog>
  </el-container>
</template>
<script>
import { mapGetters } from 'vuex'
import SidebarItem from '@/components/SidebarItem'

export default {
  components: { SidebarItem },
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.rules.rePassword !== '') {
          this.$refs.resetForm.validateField('rePassword')
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.$refs.resetForm.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      user: {},
      sysName: 'ZOE管理系统',
      isCollapse: false,
      setAvatarShow: false,
      resetPasswordShow: false,
      uploadAction: '/upload/avatar',
      copyright: 'Copyright © 2018 - SKLODA. All Rights Reserved',
      rules: {
        password: [{ validator: validatePass, trigger: 'blur' }],
        rePassword: [{ validator: validatePass2, trigger: 'blur' }]
      }
    }
  },
  computed: {
    ...mapGetters([
      'menu',
      'token',
      'avatar',
      'username',
      'roles',
      'defaultOpens'
    ]) // 映射vuex中的getters
  },
  methods: {
    handleAvatarSuccess(res, file) {
      if (res.operationState === 'SUCCESS') {
        this.setAvatarShow = false
        //  更改全局状态
        this.$store.commit('SET_AVATAR', URL.createObjectURL(file.raw))
      }
    },
    beforeAvatarUpload(file) {
      const isPic = file.type.indexOf('image') >= 0
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isPic) {
        this.$message.error('上传头像图片只能选择图片格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isPic && isLt2M
    },
    setAvatar() {
      this.setAvatarShow = true
    },
    resetPassword() {
      this.resetPasswordShow = true
    },
    resetPasswordSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid && this.user.password === this.user.rePassword) {
          this.$message({
            type: 'success',
            message: '重置成功!'
          })
          this.resetPasswordShow = false
        } else if (this.user.password !== this.user.rePassword) {
          this.$message.error('两次输入密码不一致!')
          return false
        } else {
          return false
        }
      })
    },
    collapse() {
      this.isCollapse = !this.isCollapse
    },
    logout() {
      this.$store
        .dispatch('LogOut')
        .then(() => {
          localStorage.clear()
          this.$router.push({ path: '/login' })
        })
        .catch(error => {
          console.log(error)
        })
    }
  }
}
</script>
<style lang="scss" scoped>
$header-height: 80px; //注意修改此处还需要修改上方的el-header对应的height值一致

$footer-height: 30px; //注意修改此处还需要修改上方的el-footer对应的height值一致

.el-header {
  background-color: $--color-primary;
  color: #ffffff;
  height: $header-height;
  padding: 0px;
}

.header {
  height: $header-height;
  line-height: $header-height;
  text-align: right;
  font-size: 12px;
  color: #fff;
  padding-right: 20px;
  .userinfo {
    text-align: right;
    float: right;
    .userinfo-inner {
      cursor: pointer;
      color: #fff;
      img {
        width: 60px;
        height: 60px;
        border-radius: 20px;
        margin: 10px 0px;
        float: left;
      }
    }
  }
}

.menu-collapsed {
  width: 64px;
}
.menu-expanded {
  width: 250px;
}

.logo {
  font-family: -webkit-pictograph;
  height: $header-height;
  font-size: 25px;
  text-align: center;
  color: #fff;
  float: left;
}

.tools {
  font-family: -webkit-pictograph;
  height: $header-height;
  font-size: 22px;
  text-align: left;
  padding: 0px 20px;
  color: #fff;
  float: left;
  i {
    cursor: pointer;
  }
}

.doRotate {
  transform: rotate(90deg);
}

.el-footer {
  position: fixed;
  width: 100%;
  bottom: 0;
  background-color: $--color-primary;
  color: #fff;
  text-align: center;
  height: $footer-height;
  line-height: $footer-height;
  z-index: 10;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader {
  text-align: center;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
